*, *:after, *:before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-tap-highlight-color: transparent;
}
html, body {
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-user-select: none;
	background-color: #f5f5f9;
	height: 100%;
	position: relative;
	font-family: 'Microsoft Yahei', sans-serif;
}
body.white{
	background: #fff;
}
.transparent{
	background: transparent;
}
html {
	font-size: 20px;
}
ol, ul {
	list-style: none;
}
input, button, textarea {
	-webkit-appearance: none;
}
textarea {
	word-break:break-all;
}
input:focus, textarea:focus {
	outline: none;
}
span {
	display: inline-block;
}
a:active, a:hover {
	outline: 0;
}
a, a:visited {
	text-decoration: none;
}
label, .wordWrap {
	word-wrap: break-word;
	word-break: break-all;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.ui_border_t:before {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	content: '';
	transform-origin: top;
	-webkit-transform-origin: top;
	-webkit-transform: scaleY(.4);
	transform: scaleY(.4);
	backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
	background-color: #d5d5d5;
	z-index: 1;
}
.ui_border_b:after {
	position: absolute;
	display: block;
	bottom: 0;
	right: 0;
	left: 0;
	height: 1px;
	content: '';
	transform-origin: bottom;
	-webkit-transform-origin: bottom;
	-webkit-transform: scaleY(.4);
	transform: scaleY(.4);
	backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
	background-color: #d5d5d5;
	z-index: 1;
}
.fade-enter-active{
	transition: all ease .3s;
	-webkit-transition: all ease .3s;
}
.fade-enter,
.fade-leave-active {
    opacity: 0;
}
.up-enter-active,
.up-leave-active {
	transition: all ease .3s;
	-webkit-transition: all ease .3s;
}
.up-enter,
.up-leave-active {
	transform: translateY(100%);
	-webkit-transform: translateY(100%);
}
.scaleFromRight-enter-active,
.scaleFromRight-leave-active {
	transition: all ease .2s;
	-webkit-transition: all ease .2s;
	transform: scaleX(1);
	-webkit-transform: scaleX(1);
}
.scaleFromRight-enter,
.scaleFromRight-leave-active {
	transform: scaleX(0);
	-webkit-transform: scaleX(0);
}
.list-enter-active{
	transition: all ease .5s;
	-webkit-transition: all ease .5s;
}
.list-enter,
.list-leave-to{
	opacity: 0;
	transform: translateY(10px);
	-webkit-transform: translateY(10px);
}
.spinner {
	margin: 0 auto;
    width: 50px;
    height: 120px;
    text-align: center;
    font-size: 10px;
    padding: 40px 0;
}
.spinner > div {
	background-color: #cd363a;
    margin: 0 1px;
	height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}
.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
    0%,
    100%,
    40% {
        -webkit-transform: scaleY(0.4);
    }
    20% {
        -webkit-transform: scaleY(1.0);
    }
}
@keyframes stretchdelay {
    0%,
    100%,
    40% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}
.float_r {
	float: right;
}
header{
	position: relative;
	z-index: 100;
}
header > div{
	height: 2.25rem;
    padding: 0 4rem;
    line-height: 2.25rem;
	position: relative;
}
header .left{
	position: absolute;
    left: 0;
    top: 0;
    width: 4rem;
    text-align: left;
    padding-left: 0.5rem;
	font-size: 0.75rem;
	color: #000;
}
header .left i{
	margin-right: 0;
}
header .right{
	position: absolute;
	right: 0;
	top: 0;
	width: 4rem;
	text-align: right;
	padding-right: .5rem;
	font-size: 0.75rem;
	color: #fff;
}
header .right.red{
 color: #e23e2b;
}
header p{
	text-align: center;
	font-size: 0.9rem;
	overflow: hidden;
	text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
header.white{
	background: #f4f4f4;
}
header.white p{
	color: #333;
}
header.black{
	background: #f4f4f4;
}
header.red{
	background: #b52528;
	color: #fff;
}

header.red p{
	background: #b52528;
	color: #fff;
}

header.black p{
	color: #333;
}
header .search{
	position: absolute;
    left: 2rem;
    right: 2.5rem;
    height: 2.25rem;
    padding-top: .3rem;
    z-index: 100;
}
header .search input{
	display: block;
	width: 100%;
	height: 1.6rem;
	border-radius: .3rem;
	background: #fff;
	padding: 0 .5rem;
	color: #333;
}
header .search span{
	position: absolute;
	top: 0;
	right: .2rem;
}
footer{
	position: absolute;
    bottom: 0;
    height: 50px;
    overflow: hidden;
    width: 100%;
    background: #fff;
}
footer ul{
	overflow: hidden;
	height: 100%;
}
footer li{
	height: 100%;
	float: left;
    width: 25%;
    text-align: center;
}
footer li img{
	height: 16px;
    margin: 10px auto 4px;
}
footer li p{
    font-size: 10px;
    color: #999;
    line-height: 10px;
}
footer li.active p{
	color: #cd363a;
}
footer li span{
	display: block;
	margin: auto;
	transform: scale(.5);
	-webkit-transform: scale(.5);
}
.main_bg{
	height: 100%;
	background: #f4f4f4 url('../image/main_bg.png') no-repeat top;
	background-size: 100%;
}
i[class^=icon_] {
    display: inline-block;
    height: 1rem;
    width: .9rem;
    vertical-align: middle;
    margin-top: -.2rem;
    margin-right: .2rem;
    background-size: 90%!important;
}
.icon_list{
	background: url(../image/list.png) no-repeat center;
}
.icon_list_black{
	background: url(../image/list_black.png) no-repeat center;
}
.icon_notify{
	position: relative;
	background: url(../image/notify.png) no-repeat center;
}
.icon_notify_black{
	position: relative;
	background: url(../image/notify_black.png) no-repeat center;
}
.icon_back{
	width: .8rem!important;
	background: url(../image/back_black.png) no-repeat center;
}
.icon_back_video{
  height: 1.5rem!important;display: inline-block;width: 1.5rem;
	background: url(../image/back_video.png) no-repeat center;background-size: 1.5rem;
}
.icon_back_white{
	width: .8rem!important;
	background: url(../image/back_white.png) no-repeat center;
}
.icon_close{
	background: url(../image/close.png) no-repeat center;
	height: .8rem!important;
	width: .8rem!important;
}
.icon_close_big{
	height: 1.2rem;
    width: 1.2rem;
	background: url(../image/close_big.png) no-repeat center;
}
.icon_fx_white{
	width: .8rem!important;
	background: url(../image/fx.png) no-repeat center;
}
.icon_notify.active:after{
	content: '';
    width: .3rem;
    height: .3rem;
    border-radius: .2rem;
    position: absolute;
    background: #ff1e00;
    right: -.05rem;
    bottom: .1rem;
}
i.icon_clock{
	height: 1.1rem;
	background: url(../image/clock.png) no-repeat center;
	background-size: 80%!important;
}
.icon_right{
	background: url(../image/right.png) no-repeat center;
}
.icon_search{
	background: url(../image/search.png) no-repeat center;
}
.icon_time{
	background: url(../image/time.png) no-repeat center;
}
.icon_see{
	background: url(../image/see.png) no-repeat center;
}
.icon_catalog_red{
	background: url(../image/lesson_catalog_red.png) no-repeat center;
}
.icon_catalog{
	background: url(../image/lesson_cata.png) no-repeat center;
}
.icon_detail_red{
	background: url(../image/lesson_detail_red.png) no-repeat center;
}
.icon_detail{
	background: url(../image/lesson_detail.png) no-repeat center;
}
.icon_chapter{
	background: url(../image/chapter.png) no-repeat center;
}
.icon_sound_red{
	background: url(../image/sound_red.png) no-repeat center;
}
.icon_sound_grey{
	background: url(../image/sound_grey.png) no-repeat center;
}
.icon_question_list{
	background: url(../image/question_list.png) no-repeat center;
}
.icon_hourglass{
	background: url(../image/hourglass.png) no-repeat center;
}
.icon_comment{
	background: url(../image/comment.png) no-repeat center;
}
.icon_eye{
	background: url(../image/eye.png) no-repeat center;
}
.icon_favorite{
	background: url(../image/favorite.png) no-repeat center;
}
.icon_favoriteed{
	background: url(../image/favoriteed.png) no-repeat center;
}
.icon_final_exam{
	background: url(../image/final_exam.png) no-repeat center;
}
.icon_zan{
	background: url(../image/zan.png) no-repeat center;
}
.icon_zaned{
	background: url(../image/zaned.png) no-repeat center;
}
.icon_start_study{
	background: url(../image/start_study.png) no-repeat center;
}
.icon_more_blue{
	background: url(../image/more_blue.png) no-repeat center;
}
.icon_more_green{
	background: url(../image/more_green.png) no-repeat center;
}
.icon_play_s{
	background: url(../image/play_s.png) no-repeat center;
}
.icon_pause{
	background: url(../image/pause_s.png) no-repeat center;
}
.icon_full_screen{
	background: url(../image/full_screen.png) no-repeat center;
}
.icon_cancel_full_screen{
	background: url(../image/cancelfullscreen.png) no-repeat center;
}
.icon_edit{
	background: url(../image/edit.png) no-repeat center;
}
.icon_edit_white{
	background: url(../image/edit_w.png) no-repeat center;
}
.icon_dis_caozuo{
	background: url(../image/dis_caozuo.png) no-repeat center;
}
.icon_dis_comm{
	background: url(../image/dis_comm.png) no-repeat center;
}
.icon_dis_more{
	background: url(../image/dis_more.png) no-repeat center;
}
.icon_dis_zan{
	background: url(../image/dis_zan.png) no-repeat center;
}
.icon_dis_zaned{
	background: url(../image/dis_zaned.png) no-repeat center;
}
.icon_info{
	background: url(../image/info.png) no-repeat center;
}
.icon_search_user{
	background: url(../image/search_user.png) no-repeat center;
}
.icon_chapter_grey{
	background: url(../image/chapter_grey.png) no-repeat center;
}
.icon_exam_grey{
	background: url(../image/exam_grey.png) no-repeat center;
}
.icon_pro_grey{
	background: url(../image/pro_grey.png) no-repeat center;
}
.icon_clear{
	background: url(../image/clear.png) no-repeat center;
}
.icon_watch_dur{
	background: url(../image/watch_dur.png) no-repeat center;
}
.icon_s_close{
	background: url(../image/s_close.png) no-repeat center;
}
.icon_s_open{
	background: url(../image/s_open.png) no-repeat center;
}
.no_more{
	text-align: center;
	color: #999;
	font-size: .65rem;
	padding: 1rem
}
